<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>拖动按钮控制图片列表滚动_Download by http://www.codefans.net</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="jqueryui/css/jquery-ui-1.7.2.custom.css" />
<script type="text/javascript" src="jqueryui/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jqueryui/js/ui.core.js"></script>
<script type="text/javascript" src="jqueryui/js/ui.slider.js"></script>
<script type="text/javascript">
$(function() {
	// 列表1：
	//获取元素
	var $contain = $(".drag_ul", $("#drag"));
	var $items = $("li",  $("#drag .drag_ul") );
	var $dragCont = $(".drag_cont", $("#drag"));
	var $button  = $(".drag_cont_btn", $("#drag"));
	//给容器设置宽度
	var width = ($items.length * parseInt($items.outerWidth(true))) + 10 ;
	$contain.css("width", width);	
	// slider将要用到的参数:
	// (1)max:最大值
	// (2)slide:滑动时动态改变容器的left.
	var sliderOpts = {
		max: width - parseInt($dragCont.css("width")),
		slide: function(e, ui) { 
			$contain.css("left", "-" + ui.value + "px");
		}
	};
	//创建slider
	$button.slider(sliderOpts);

	/**********************************/
	// 列表2：
	//获取元素
	var $contain_02 = $(".drag_ul", $("#drag_02"));
	var $items_02 = $("li",  $("#drag_02 .drag_ul") );
	var $dragCont_02 = $(".drag_cont", $("#drag_02"));
	var $button_02  = $(".drag_cont_btn", $("#drag_02"));
	//给容器设置宽度
	var len =  $items_02.length ;
	if($items_02.length/2){len = $items_02.length+1; }else{}
	var width_02 = ((len * parseInt($items_02.outerWidth(true))) / 2 )  + 10;
	$contain_02.css("width", width_02);	
	// slider将要用到的参数:
	// (1)max:最大值
	// (2)slide:滑动时动态改变容器的left.
	var sliderOpts_02 = {
		max: width_02 - parseInt($dragCont_02.css("width")),
		slide: function(e, ui) { 
			$contain_02.css("left", "-" + ui.value + "px");
		}
	};
	//创建slider
	$button_02.slider(sliderOpts_02);

});
</script>
</head>
<body>

<div id="drag" class="drag">
	<div class="wrap3">
		<div class="drag_cont">
			<ul class="drag_ul clearfix">
				<li><a href="#" title="第1张"><img src="http://202.120.2.213/1.jpg" alt="第1张" /></a></li>
				<li><a href="#" title="第2张"><img src="http://202.120.2.213/2.jpg" alt="第2张" /></a></li>
				<li><a href="#" title="第3张"><img src="http://202.120.2.213/3.jpg" alt="第3张" /></a></li>
				<li><a href="#" title="第4张"><img src="http://202.120.2.213/4.jpg" alt="第4张" /></a></li>

				<li><a href="#" title="第5张"><img src="http://202.120.2.213/1.jpg" alt="第5张" /></a></li>
				<li><a href="#" title="第6张"><img src="http://202.120.2.213/2.jpg" alt="第6张" /></a></li>
				<li><a href="#" title="第7张"><img src="http://202.120.2.213/3.jpg" alt="第7张" /></a></li>
				<li><a href="#" title="第8张"><img src="http://202.120.2.213/4.jpg" alt="第8张" /></a></li>
				<li><a href="#" title="第5张"><img src="http://202.120.2.213/1.jpg" alt="第5张" /></a></li>
				<li><a href="#" title="第6张"><img src="http://202.120.2.213/2.jpg" alt="第6张" /></a></li>
				<li><a href="#" title="第7张"><img src="http://202.120.2.213/3.jpg" alt="第7张" /></a></li>
				<li><a href="#" title="第8张"><img src="http://202.120.2.213/4.jpg" alt="第8张" /></a></li>
				<li><a href="#" title="第5张"><img src="http://202.120.2.213/1.jpg" alt="第5张" /></a></li>
				<li><a href="#" title="第6张"><img src="http://202.120.2.213/2.jpg" alt="第6张" /></a></li>
				<li><a href="#" title="第7张"><img src="http://202.120.2.213/3.jpg" alt="第7张" /></a></li>
				<li><a href="#" title="第8张"><img src="http://202.120.2.213/4.jpg" alt="第8张" /></a></li>
				<li><a href="#" title="最后1张"><img src="http://202.120.2.213/1.jpg" alt="最后1张" /></a></li>
			</ul>
		</div>
		<div class="drag_cont_btn"></div>
	</div>
</div>
<br/>
<div id="drag_02" class="drag">
	<h3>DragScroll 列表2</h3>
	<div class="wrap" style="height:210px;">
		<div class="drag_cont" style="height:190px;">
			<ul class="drag_ul clearfix" >
				<li><a href="#" title="第1张"><img src="img/1.jpg" alt="第1张" /></a></li>
				<li><a href="#" title="第2张"><img src="img/2.jpg" alt="第2张" /></a></li>
				<li><a href="#" title="第3张"><img src="img/3.jpg" alt="第3张" /></a></li>
				<li><a href="#" title="第4张"><img src="img/4.jpg" alt="第4张" /></a></li>
				<li><a href="#" title="第5张"><img src="img/5.jpg" alt="第5张" /></a></li>
				<li><a href="#" title="第6张"><img src="img/6.jpg" alt="第6张" /></a></li>
				<li><a href="#" title="第7张"><img src="img/7.jpg" alt="第7张" /></a></li>
				<li><a href="#" title="第8张"><img src="img/8.jpg" alt="第8张" /></a></li>
				<li><a href="#" title="最后1张"><img src="img/9.jpg" alt="最后1张" /></a></li>
			</ul>
		</div>
	</div>
	<div class="drag_cont_btn"></div>
</div>
<!--
   ┏━━━━━━━━━━━━━━━━━━━━━┓
   ┃             源 码 爱 好 者               ┃
   ┣━━━━━━━━━━━━━━━━━━━━━┫
   ┃                                          ┃
   ┃           提供源码发布与下载             ┃
   ┃                                          ┃
   ┃        http://www.codefans.net           ┃
   ┃                                          ┃
   ┃            互助、分享、提高              ┃
   ┗━━━━━━━━━━━━━━━━━━━━━┛
-->
</body>
</html>
